<!-- src/components/RecruiterView.vue -->
<template>
  <div class="full-width row justify-between">
    <div class="col-6 q-pt-md q-pr-md job-list">
      <q-table flat bordered virtual-scroll :pagination="pagination" :rows-per-page-options="rowsPerPageOptions"
               :loading="loading" :rows="jobs" :columns="columns" row-key="id" class="full-height" card-class="bg-primary" table-class="bg-white"
      >
        <template v-slot:top>
          <q-banner class="bg-primary q-pa-none q-ma-none text-white full-width">
            <div class="row justify-between">
              <span class="job-list-title col-6 text-left row full-height self-center">岗位列表</span>
              <span class="col-6 text-right">
                <q-btn class="bg-white text-primary" label="新增岗位" @click="showDetails(null, 'NewJob')"/>
              </span>
            </div>
          </q-banner>
        </template>
        <template v-slot:header="props">
          <q-tr :props="props">
            <q-th v-for="col in props.cols" :key="col.name" :props="props">
              <div class="full-width text-left text-weight-bold">{{ col.label }}</div>
            </q-th>
          </q-tr>
        </template>
        <template v-slot:body="props">
          <q-tr :props="props">
            <q-td v-for="col in props.cols" :key="col.name" :props="props">
              <div v-if="col.name == 'action'" class="text-left">
                <q-btn-group>
                  <q-btn dense label="查看详情" @click="showDetails(props.row, 'JobDetails')"/>
                  <q-btn dense label="申请人列表" @click="showDetails(props.row, 'ApplicantList')"/>
<!--                  <q-btn dense label="移除岗位" class="text-negative" @click="removeJobPost(props.row.id)"/>-->
                </q-btn-group>
              </div>
              <div v-else class="text-left">
                {{ props.row[col.name]}}
              </div>
            </q-td>
          </q-tr>
        </template>
        <template v-slot:no-data>
          <span class="text-white" style="font-size: 14px"><q-icon name="warning" class="q-mx-xs" size="20px"/>找不到数据</span>
        </template>
        <template v-slot:bottom>
          <div class="flex flex-center full-width text-white">
            <q-select dense options-dense v-model="pagination.rowsPerPage" :options="rowsPerPageOptions" bg-color="white"
                      transition-show="jump-up" transition-hide="jump-up" @update:model-value="loadJobData" >
              <template v-slot:after>
                <span class="select-text">条/页 共{{ pagination.rowsNumber }}条数据</span>
              </template>
            </q-select>
            <q-pagination
                v-model="pagination.page" :max="pages" :max-pages="3"
                ellipsess boundary-numbers :direction-links="true"
                @update:model-value="changePagination"
                @input="changePagination" active-text-color="black"
                color="white"
            >
            </q-pagination>
            <span>跳至</span>
            <q-input dense outlined
                v-model="toPage"
                class="text-black text-weight-bolder bg-white rounded-borders q-mx-xs"
                @input="changeToPage" @keyup.enter.native="refreshTableData"
            ></q-input>
            <span>页</span>
          </div>
        </template>
      </q-table>
    </div>
    <div class="col-6 q-pt-md job-details">
      <div class="full-height">
        <ApplicantList :jobPost="selectedJob" v-if="selectedType === 'ApplicantList'"/>
        <JobDetails v-else :type="selectedType === 'JobDetails'? 'edit' : 'new'" :jobPost="selectedJob" @update="updateJob"/>
      </div>
    </div>
  </div>
</template>
<style lang="sass" scoped>
.job-list
  height: 93vh
  .job-list-title
    font-size: 24px
    font-weight: bolder
  .select-text
    font-size: 12px
    color: white
.job-details
  height: 93vh
</style>
<script setup lang="ts">
import {ref, onMounted} from 'vue';
import {RECRUITER_ROLE, JobPost, Pagination} from "../vite-env.d";
import JobDetails from "./JobDetails.vue";
import ApplicantList from "./ApplicantList.vue";
import {LocalStorageUtil} from "../assets/local-storage.ts";
import RecruiterService from "../services/RecruiterService.ts";

const jobs = ref<JobPost[]>([])
const rowsPerPageOptions = [10, 20, 50, 100]
const pagination = ref<Pagination>( {
  sortBy: 'id',
  descending: false,
  page: 1,
  rowsPerPage: rowsPerPageOptions[0],
  rowsNumber: 3
})
const loading = ref(false)
const pages = ref(1)
const toPage = ref('')
const selected = ref([])
const recruiterService = new RecruiterService()
type DetailType = 'JobDetails' | 'ApplicantList' | 'NewJob'
const selectedJob = ref<JobPost | null>(null)
const selectedType = ref<DetailType> ('JobDetails')
const columns = [
  {name: "id", require: true, label: "ID"},
  {name: "title", require: true, label: "岗位"},
  {name: "company", require: true, label: "公司"},
  {name: "location", require: true, label: "位置"},
  {name: "salary", require: true, label: "薪酬"},
  {name: "action", require: true, label: "操作"},
]
const changePagination = async (page: number) => {
  selected.value = []
  console.log(`changePagination: ${page}`)
  await getJobDataPages(page)
}
const changeToPage = async (val: string) => {
  selected.value = []
  let r = /^\+?[1-9][0-9]*$/
  if (r.test(val) && parseInt(val) <= pages.value) {
    // 输入正整数 且 小于最大页数
    // console.log(`input toPage: ${val} 是一个正整数`)
    await getJobDataPages(parseInt(val))
  } else {
    toPage.value = ''
  }
}
const refreshTableData = async () => {
  if (toPage.value !== '') {
    pagination.value.page = parseInt(toPage.value)
    await getJobDataPages()
  }
}
const getJobDataPages = async (page: number = 1, rowsPerPage: number = pagination.value.rowsPerPage) => {
  const {type, user} = await LocalStorageUtil.getCurrentUser()
  if (type == RECRUITER_ROLE && user) {
    loading.value = true
    const jobPostPagination = await recruiterService.getJobPages(user.id,page - 1, rowsPerPage)
    if (jobPostPagination?.data)
      jobs.value = jobPostPagination.data
    pagination.value.page = page
    pagination.value.rowsPerPage = jobPostPagination.rowsPerPage
    pagination.value.rowsNumber = jobPostPagination.rowsNumber
    pagination.value.descending = jobPostPagination.descending
    pagination.value.sortBy = jobPostPagination.sortBy
    pages.value = Math.ceil(jobPostPagination.rowsNumber/jobPostPagination.rowsPerPage)
    loading.value = false
  }
}
const removeJobPost = async (id : number) => {
  console.log("Remove Job Id", id)
}
const showDetails = async (jobPost: JobPost | null, type : DetailType) => {
  selectedType.value = type
  selectedJob.value = jobPost
}
const updateJob = async (data) => {
  const {type, user} = await LocalStorageUtil.getCurrentUser()
  if (type == RECRUITER_ROLE && user) {
    await recruiterService.saveJobPost(user.id, data.jobPost)
    await getJobDataPages()
    await showDetails(data.jobPost, 'JobDetails')
  }
}
const loadJobData = async () => {
  await getJobDataPages()
  if (jobs.value.length > 0)
    await showDetails(null, 'NewJob')
}
onMounted(async () => {
  await loadJobData()
})
</script>

